<template>
    <layout>
        <div class="merchat">
            <div class="search">
                <div class="form" @click="showForm()">
                    <input type="text" disabled placeholder="商户名称/门店编码">
                    <span class="icon icon-sousuo"></span>
                </div>
            </div>
            <!--搜索表单-->
            <div class="search-form c-search" v-show="fSearch">
                <div class="form-group">
                    <label>
                        商户/门店名
                    </label>
                    <input type="text" placeholder="" v-model="searchParm.store_name">
                </div>
                <div class="form-group">
                    <label>
                        商户/门店编码
                    </label>
                    <input type="text" placeholder="" v-model="searchParm.store_no">
                </div>
                <div class="form-group pull create-time">
                    <label>
                        签约时间
                    </label>
                    <div class="date iconCell">
                        <div @click="openPicker(0)">
                            <input type="text" v-model="searchParm.store_input_time_start" disabled>
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.store_input_time_start"
                               @click="clearStartAt"></i>
                            <i class="icon-xiala" @click="openPicker(0)"></i>
                        </div>
                    </div>
                    <span>至</span>
                    <div class="date iconCell">
                        <div @click="openPicker(1)">
                            <input type="text" v-model="searchParm.store_input_time_end" disabled>
                        </div>
                        <div class="iconfont">
                            <i class="icon-close little" v-if="searchParm.store_input_time_end" @click="clearEndAt"></i>
                            <i class="icon-xiala" @click="openPicker(1)"></i>
                        </div>
                    </div>
                </div>
                <div class="form-group pull large iconCell">
                    <label>
                        城市
                    </label>
                    <div @click="cityVisible=true">
                        <input type="text" v-model="cityName" @click="cityVisible=true" disabled id="demo">
                    </div>
                    <div class="iconfont">
                        <i class="icon-close" v-if="searchParm.store_city" @click="clearCity"></i>
                        <i class="icon-xiala" @click="cityVisible=true"></i>
                    </div>
                </div>
                <div class="form-group pull large iconCell">
                    <label>
                        状态
                    </label>
                    <div @click="showContract">
                        <input type="text" v-model="c_s_text" disabled>
                    </div>
                    <div class="iconfont">
                        <i class="icon-close" v-if="searchParm.store_status" @click="clearStatus"></i>
                        <i class="icon-xiala" @click="showContract"></i>
                    </div>
                </div>
                <div class="btn" @click="submit()">
                    查询
                </div>
            </div>
            <noData v-on:search="showForm" v-if="no_data"></noData>
            <!--订单列表-->
            <scroller v-on:load="loadmore" v-on:refresh="refresh" ref="scroller">
                <div class="order-list">
                    <div class="order-item" v-for="item in storeList">
                        <div class="top color" @click="toMerchatDetail(item.store_no)">
                            <span class="color">{{item.store_name}}</span>
                        </div>
                        <div class="content">
                            <ul>
                                <li>
                                    <span class=" color">商户名称</span>{{item.retail_name}}
                                </li>
                                <li>
                                    <span class="color1">商户代码</span>{{item.retail_no}}
                                </li>
                                <li>
                                    <span class="color1">门店名称</span>{{item.store_name}}
                                </li>
                                <li>
                                    <span class="color1">门店代码</span>{{item.store_no}}
                                </li>
                                <li>
                                    <span class="color1">门店状态</span>{{item.store_status}}
                                </li>
                                <li>
                                    <span class="color1">销售代表</span>{{item.sales_name}}
                                </li>
                                <li>
                                    <span class="color1">销售经理</span>{{item.store_sales_manager_name}}
                                </li>
                                <li>
                                    <span class="color1">区域总监</span>{{item.city_manager_name}}
                                </li>
                                <li>
                                    <span class="color1">家庭主妇</span>{{item.is_house_wife}}
                                </li>
                                <li>
                                    <span class="color1">胸部美容</span>{{item.is_chest}}
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </scroller>

        </div>

        <!--日期组件-->
        <mt-datetime-picker
                ref="picker"
                type="date"
                :startDate="starDate"
                :endDate="endDate"
                v-model="pickerValue"
                @confirm="handleConfirm">
        </mt-datetime-picker>
        <cityPicker :visible="cityVisible" @cityToggle="cityToggle" @confirm="cityConfirm"></cityPicker>
        <!--状态-->
        <mt-popup v-model="c_s_open" position="bottom">
            <ul class="bottom-list">
                <li v-for="(item,index) in storeStatus" @click="closeContract(index,item)">{{item}}</li>
            </ul>
        </mt-popup>

    </layout>
</template>
<script>

    import layout from './layout'
    import {mapState} from "vuex"
    import scroller from "./scoller"
    import address from '../api/city.data';
    import noData from './noData';
    import cityPicker from './cityPicker/cityPicker'
    import {dateFormat} from '../util/methods'
    export default {
        name: 'mechat',
        components: {
            layout,
            scroller,
            noData,
            cityPicker,
        },
        data(){
            return {
                fSearch: false,
                store_input_time_start: '',
                timeIndex: '',
                pickerValue: dateFormat(new Date(), "yyyy-MM-dd"),
                starDate:new Date(new Date().getFullYear() - 1, 0, 1),
                endDate:new Date(new Date().getFullYear() + 1, 11, 31),
                c_s_open: false,
                storeStatus: {"01": "新增", "02": "审核中", "03": "准入", "04": "拒绝", "05": "激活", "06": "关闭", "07": "暂时关闭"},
                page: 1,
                no_data: false,
                cityName: '',
                cityVisible: false,
            }
        },

        methods: {
            showForm(){
                this.fSearch = !this.fSearch
                this.submit()
                window.scrollTo(0, 0);
            },
            showContract(){
                this.c_s_open = true;
            },
            closeContract(i, item){
                this.c_s_text = item;
                this.c_s_open = false;
                //更新state中的status
                this.$store.commit({type: 'setMerchantParams', params: {"params$store_status": i}})
            },
            handleConfirm(){
                let timeType;
                this.timeIndex == "0" ? timeType = "store_input_time_start" : timeType = "store_input_time_end"

                this.$store.commit({
                    type: 'setTime',
                    timeType: timeType,
                    time: dateFormat(this.pickerValue, "yyyy-MM-dd")
                })

            },
            openPicker(i) {
                this.timeIndex = i;
                this.$refs.picker.open();
            },
            submit(append = false, showNodata = true){
                this.$store.commit({type: 'setMerchantParams', params: {"params$page": 1}})
                this.request()
            },
            request(append = false, showNodata = true){
                let self = this;
                self.$store.dispatch({
                    type: 'storeList',
                    append: append
                }).then(function (res) {
                    if (!res.data.length) {
                        self.$refs.scroller.isNoData()
                        self.$store.commit({type:'resetParam'})
                    }
                    if (typeof(self.$refs.scroller) !== 'undefined') {
                        self.$refs.scroller.removeLoading()
                    }
                    self.no_data = !res.data.length && showNodata ? true : false
                }, function (err) {

                })
            },
            toMerchatDetail(id){
                this.$router.push("/mechat/" + id)
            },
            loadmore(){
                this.$store.commit({type: 'setMerchantParams', params: {"params$page": this.searchParm.page + 1}})
                this.request(true, false)

            },
            refresh(){
                this.$store.commit({type: 'setMerchantParams', params: {"params$page": 1}})
                this.$refs.scroller.reset()
                this.request(false, false)
            },
            cityConfirm(select){
                if (select.city.key && select.proivnce.key) {
                    this.cityName = select.proivnce.key + "-" + select.city.key;
                    this.$store.commit({type: 'setMerchantParams', params: {"params$store_city": select.city.value}})
                }
            },
            cityToggle(value){
                this.cityVisible = value;
            },
            clearCity(){
                this.cityName = ""
                this.$store.commit({type: 'setMerchantParams', params: {"params$store_city": ''}})
            },
            clearStartAt(){
                this.$store.commit({type: 'setMerchantParams', params: {"params$store_input_time_start": ''}})
            },
            clearEndAt(){
                this.$store.commit({type: 'setMerchantParams', params: {"params$store_input_time_end": ''}})
            },
            clearStatus(){
                this.$store.commit({type: 'setMerchantParams', params: {"params$store_status": ''}})
            },
        },
        watch: {
            no_data(cur, old){
                this.fSearch = old;
            },
        },
        computed: {
            ...mapState({
                storeList: state => state.merchat.storeList,
                searchParm: state => state.merchat.params,
            }),
            c_s_text: {
                get: function () {
                    return this.storeStatus[this.searchParm.store_status];
                },
                set: function (newValue) {
                    this.property = newValue;
                }
            }
        },
        created: function () {
        }

    }
</script>